<template>
  <div class='wrapper'>
    <swiper :options="swiperOption">
      <!-- slides -->
      <swiper-slide v-for="item of swiperList" :key="item.id">
        <img class='swiper-img' :src='item.imgUrl'/>
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default{
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      },
      swiperList: [{
        'id': '001',
        'imgUrl': 'http://fuss10.elemecdn.com/2/7a/946aba678f06545c946a8fe8fedf0jpeg.jpeg?imageMogr/format/webp/'
      }, {
        'id': '002',
        'imgUrl': 'http://fuss10.elemecdn.com/0/e7/64044fb6df771e9cb42196ae3eeeejpeg.jpeg?imageMogr/format/webp/'
      }]
    }
  }
}
</script>

<style lang='stylus' scoped>
  // wrapper下面的子组件只要出现了这个样式都会被穿透更改
  .wrapper >>> .swiper-pagination-bullet-active
    background #fff
  .wrapper
    height 0
    width 100%
    overflow hidden
    // 图片长宽比防止下面元素的抖动
    padding-bottom 28%
    background #eee
    .swiper-img
      width 100%
</style>
